﻿@using HTN.Library
@using BookShop.Library.Constant
@using BookShop.Library.Common
@model BookShop.Site.Models.HomeViewModel
@{
    ViewBag.Title = "Trang chủ | Book Shop Ngân Hà";
}

@section Slider{
    <!-- BEGIN SLIDER -->
    <div class="page-slider margin-bottom-35">
        <div id="layerslider" style="width: 90%; height: 350px; margin: 0 auto;">
            <div class="ls-slide ls-slide1" data-ls="offsetxin: right; slidedelay: 7000; transition2d: 24,25,27,28;">
                <img src="@Utility.UrlCombine(CommonFunction.GetConfigValue("SiteUrl"), SliderImageSource.Image1)" class="ls-bg" alt="Slide background">
            </div>
            <div class="ls-slide ls-slide2" data-ls="offsetxin: right; slidedelay: 7000; transition2d: 110,111,112,113;">
                <img src="@Utility.UrlCombine(CommonFunction.GetConfigValue("SiteUrl"), SliderImageSource.Image2)" class="ls-bg" alt="Slide background">
            </div>
            <div class="ls-slide ls-slide3" data-ls="offsetxin: right; slidedelay: 7000; transition2d: 92,93,105;">
                <img src="@Utility.UrlCombine(CommonFunction.GetConfigValue("SiteUrl"), SliderImageSource.Image3)" class="ls-bg" alt="Slide background">
            </div>
            <div class="ls-slide ls-slide4" data-ls="offsetxin: right; slidedelay: 7000; transition2d: 110,111,112,113;">
                <img src="@Utility.UrlCombine(CommonFunction.GetConfigValue("SiteUrl"), SliderImageSource.Image4)" class="ls-bg" alt="Slide background">
            </div>
        </div>
    </div>
}

<div class="row margin-bottom-40">
    <!-- BEGIN NEW ARRIVAL PRODUCT -->
    <div class="col-md-12 sale-product">
        <h2><a href="@Url.Action("ProductPage", new { sort = SortType.CreateTimeDesc })">Sách mới về</a></h2>
        <div class="owl-carousel owl-carousel5">
            @if (Model != null && Model.NewBookList.Count > 0)
            {
                foreach (var book in Model.NewBookList)
                {
                <div>
                    @{ Html.RenderPartial("_Product", book); }
                </div>
                }
            }
        </div>
    </div>
    <!-- END NEW ARRIVAL PRODUCT -->
</div>
<!-- BEGIN SIDEBAR & CONTENT -->
<div class="row margin-bottom-40 ">
    <div class="sidebar col-md-3 col-sm-3">
        <ul class="list-group margin-bottom-25 sidebar-menu">
            @if (Model != null)
            {
                foreach (var item in Model.CategoryList)
                {
                <li class="list-group-item clearfix">
                    <a href="@Url.Action("ProductPage", "Home", new { categoryId = item.Id })"><i class="fa fa-angle-right"></i>@item.Name</a>
                </li>
                }
            }
        </ul>
    </div>
    <!-- BEGIN CONTENT -->
    <div class="col-md-9 col-sm-8">
        <h2><a href="@Url.Action("BestsellerPage")">Bestsellers</a></h2>
        <div class="owl-carousel owl-carousel3">
            @if (Model != null && Model.BestSellerBookList != null)
            {
                foreach (var book in Model.BestSellerBookList)
                {
                <div>
                    @{ Html.RenderPartial("_Product", book); }
                </div>
                }
            }
        </div>
    </div>
    <!-- END CONTENT -->
</div>
<!-- END SIDEBAR & CONTENT -->
<!-- BEGIN TWO PRODUCTS & PROMO -->
<div class="row margin-bottom-35 ">
    <div class="col-md-6 two-items-bottom-items">
        <h2><a href="@Url.Action("ProductPage", new { sort = SortType.RatePointDesc })">Top bình chọn</a></h2>
        <div class="owl-carousel owl-carousel2">
            @if (Model != null && Model.TopRatedBookList != null)
            {
                foreach (var book in Model.TopRatedBookList)
                {
                <div>
                    @{ Html.RenderPartial("_Product", book); }
                </div>
                }
            }
        </div>
    </div>
    <!-- BEGIN PROMO -->
    <div class="col-md-6 shop-index-carousel">
        <div class="content-slider">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="@SliderImageSource.PromoImage1" class="img-responsive" alt>
                    </div>
                    <div class="item">
                        <img src="@SliderImageSource.PromoImage2" class="img-responsive" alt>
                    </div>
                    <div class="item">
                        <img src="@SliderImageSource.PromoImage3" class="img-responsive" alt>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END PROMO -->
</div>
<!-- END TWO PRODUCTS & PROMO -->

@section Javascript{
    <script src="~/Content/assets/global/plugins/slider-layer-slider/js/greensock.js" type="text/javascript"></script>
    <script src="~/Content/assets/global/plugins/slider-layer-slider/js/layerslider.transitions.js" type="text/javascript"></script>
    <script src="~/Content/assets/global/plugins/slider-layer-slider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script>
    <script src="~/Content/assets/frontend/pages/scripts/layerslider-init.js" type="text/javascript"></script>
    <script src="~/Content/assets/global/plugins/carousel-owl-carousel/owl-carousel/owl.carousel.min.js" type="text/javascript"></script>
    <script src="~/Content/assets/global/plugins/fancybox/source/jquery.fancybox.pack.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            LayersliderInit.initLayerSlider();
            $(".owl-carousel5").owlCarousel({
                pagination: false,
                navigation: true,
                items: 5,
                addClassActive: true,
                itemsCustom: [
                    [0, 1],
                    [320, 1],
                    [480, 2],
                    [660, 2],
                    [700, 3],
                    [768, 3],
                    [992, 4],
                    [1024, 4],
                    [1200, 5],
                    [1400, 5],
                    [1600, 5]
                ],
            });
            $(".owl-carousel3").owlCarousel({
                pagination: false,
                navigation: true,
                items: 3,
                addClassActive: true,
                itemsCustom: [
                    [0, 1],
                    [320, 1],
                    [480, 2],
                    [700, 3],
                    [768, 2],
                    [1024, 3],
                    [1200, 3],
                    [1400, 3],
                    [1600, 3]
                ],
            });
            $(".owl-carousel2").owlCarousel({
                pagination: false,
                navigation: true,
                items: 2,
                addClassActive: true,
                itemsCustom: [
                    [0, 1],
                    [320, 1],
                    [480, 2],
                    [700, 3],
                    [975, 2],
                    [1200, 2],
                    [1400, 2],
                    [1600, 2]
                ],
            });
        });
    </script>
}

@section Css{
    <link href="~/Content/assets/global/plugins/slider-layer-slider/css/layerslider.css" rel="stylesheet">
    <link href="~/Content/assets/global/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet">
    <link href="~/Content/assets/global/plugins/carousel-owl-carousel/owl-carousel/owl.carousel.css" rel="stylesheet">
}
